<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html>
<head></head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css"
      type="text/css"/>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap-3.1.1.min.js"
        type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

<style>
  body {
    margin-top: 20px;
    margin: 0 auto;
  }

  .carousel-inner .item img {
    width: 100%;
    height: 300px;
  }

  .container .row div {
    /* position:relative;
    float:left; */
  }

  font {
    color: #3164af;
    font-size: 18px;
    font-weight: normal;
    padding: 0 10px;
  }

  .font20 {
    font-size: 20px;
    padding: 0 10px;
  }
</style>
</head>
<body>


<jsp:include page="head.jsp"/>

<div class="container"
     style="width: 100%;background-size:cover;background:url('${pageContext.request.contextPath}/images/back1.jpg');">
  <div class="row">

    <div class="col-md-2"></div>

    <div class="col-md-5"
         style="padding:40px 80px;margin:30px;">
      <font>忘记密码</font><span style="color: red" id="warn"></span>
      <form class="form-horizontal" style="margin-top:5px;" method="post">
        <input type="text" id="uid" value="${uid}" hidden="hidden">

        <div class="form-group">
          <label for="password" class="font20 col-sm-3 control-label">密码</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" id="password" placeholder="请输入密码"
                   name="password">
          </div>
        </div>

        <div class="form-group">
          <label for="confirmpwd" class="font20 col-sm-3 control-label">确认密码</label>
          <div class="col-sm-8">
            <input type="password" class="form-control" id="confirmpwd" placeholder="请输入确认密码"
                   name="verifypassword">
          </div>
          <span id="password_msg"></span>
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <input id="sub" type="button" width="100" value="提交" name="submit" border="0"
                   style="background: url('${pageContext.request.contextPath}/images/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                           height:35px;width:100px;color:white;">
          </div>
        </div>
      </form>

    </div>

    <div class="col-md-2"></div>

  </div>
</div>

<jsp:include page="foot.jsp"/>

</body>
<script>

  var c = 2;
  $("#sub").click(function () {
    $.post("${pageContext.request.contextPath}/user/forgetResetPassword.do",
        {
          uid: $("#uid").val(),
          password: $("#password").val(),
          uPassword: $("#confirmpwd").val()
        },
        function (d) {
          if (d.status == 0) {
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">重置密码成功</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': '#8FBC8F',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': '#fff',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                }, (1.5 * 1000));

            if (d.status == 0) {
              window.setInterval(function () {
                c--;
                if (c == 0) {
                  location.href = "${pageContext.request.contextPath}/index.do";
                }
              }, 1000);
            }
          }
          if (d.status == 1) {
            var windowWidth = $(window).width();
            var tipsDiv = '<div class="tipsClass">重置密码失败</div>';
            $('body').append(tipsDiv);
            $('div.tipsClass').css({
              'top': 130 + 'px',
              'left': ( windowWidth / 2 ) - 350 / 2 + 'px',
              'position': 'absolute',
              'padding': '10px 16px',
              'background': '#8FBC8F',
              'font-size': 18 + 'px',
              'margin': '0 auto',
              'text-align': 'center',
              'width': '350px',
              'height': 'auto',
              'color': '#fff',
              'opacity': '0.8'
            }).show();
            setTimeout(
                function () {
                  $('div.tipsClass').fadeOut();
                }, (1.5 * 1000));

            if (d.status == 0) {
              window.setInterval(function () {
                c--;
                if (c == 0) {
                  location.href = "${pageContext.request.contextPath}/index.do";
                }
              }, 1000);
            }
          }
        })
  });

  $("#confirmpwd").blur(
      function () {
        $.get("${pageContext.request.contextPath}/user/checkPassword.do",
            {
              password: $("#password").val(),
              uPassword: $("#confirmpwd").val()
            },
            function (d) {
              if (d.msc == 1) {
                $("#password_msg").html("<p style='color: green'>√</p>");
                $("#sub").attr("disabled", false);
              } else if (d.msc == 0) {
                $("#password_msg").html("<p style='color: red'>×</p>");
                $("#sub").attr("disabled", true);
              }

            })
      });
</script>
</html>




